<template>
  <div class="supply-setting">
    <el-breadcrumb>
      <el-breadcrumb-item>系统设置</el-breadcrumb-item>
      <el-breadcrumb-item>酒店列表</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="supply-content">
      <el-form :rules="rules"
        :model="ruleForm">
        <el-form-item>
          <el-dropdown trigger="hover"
            @command="dropdownStateChange">
            <span class="el-dropdown-link">
              {{dropdownValue}}
              <i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown"
              placement="left-start"
              class="hotel-state-select">
              <el-dropdown-item command="全部状态">
                全部状态
              </el-dropdown-item>
              <el-dropdown-item command="启用">
                启用
              </el-dropdown-item>
              <el-dropdown-item command="禁用">
                禁用
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
          <div class="cascader-input">
            <el-cascader :options="options"
              change-on-select
              placeholder="请选择城市"></el-cascader>
          </div>
          <el-input placeholder="请输入酒店名/星级/酒店ID/房型名"
            class="input-with-select">
            <el-button slot="append"
              icon="el-icon-search"></el-button>
          </el-input>
          <!-- <el-button type="primary" size="small" style="float: right;" @click="addSuppliers">新增酒店</el-button> -->
        </el-form-item>
        <el-form-item>
          <el-table :data="tableData"
            style="width: 100%"
            max-height="600">
            <el-table-column prop="id"
              label="酒店ID"
              width="150">
            </el-table-column>
            <el-table-column prop="name"
              label="酒店名称"
              width="120">
            </el-table-column>
            <el-table-column prop="province"
              label="所在省份"
              width="120">
            </el-table-column>
            <el-table-column prop="city"
              label="所在城市"
              width="120">
            </el-table-column>
            <el-table-column prop="area"
              label="所在区/县"
              width="200">
            </el-table-column>
            <el-table-column prop="star"
              label="星级"
              width="200">
            </el-table-column>
            <el-table-column prop="roomNum"
              label="客房数"
              width="120">
            </el-table-column>
            <el-table-column prop="state"
              label="状态"
              width="120">
            </el-table-column>
            <el-table-column fixed="right"
              label="操作"
              width="120">
              <template slot-scope="scope">
                <el-button @click.native.prevent="stateRow(scope.$index, tableData)"
                  type="text"
                  size="small">
                  {{(scope.$index, state[scope.$index])}}
                </el-button>
                <el-button @click.native.prevent="editHotel(scope.$index, tableData)"
                  type="text"
                  size="small">
                  编辑
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-form-item>
        <el-form-item style="margin-top: 20px;">
          <el-pagination @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="pageSize"
            layout="total, prev , pager , next, sizes, jumper"
            :total="pageSize">
          </el-pagination>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>
const StaffAccount = () => import("@/components/setting/staff/StaffAccount");
const DepartmentSetting = () =>
  import("@/components/setting/staff/DepartmentSetting");
const PermissionsSetting = () =>
  import("@/components/setting/staff/PermissionsSetting");
const Breadcrumb = () => import("@/components/common/Breadcrumb");
export default {
  name: "Staff",
  data() {
    return {
      token: "",
      content: {
        firstTitle: "酒店管理",
        secondTitle: "酒店信息",
        type: "close"
      },
      showDepartment: false,
      state: [],
      ruleForm: {
        name: "",
        superior: ""
      },
      rules: {
        name: [{ required: true, message: "请输入部门名称", trigger: "blur" }],
        superior: [{ required: true, message: "请输入上级部门" }]
      },
      options: [
        {
          value: "zhinan",
          label: "指南",
          children: [
            {
              value: "zhinan",
              label: "指南"
            }
          ]
        }
      ],
      tableData: [],
      currentPage: 1,
      pageSize: 100,
      listData: [],
      copyData: [],
      dropdownValue: "全部状态"
    };
  },
  created() {
    // this.fetchData()
    this.$http
      .post("salehotel/list?token=" + window.commo.token, {
        pageSize: this.pageSize,
        pageNum: this.currentPage,
        timestamp: 0,
        version: "string",
        operation: "string"
      })
      .then(res => {
        this.listData = res.data.list;
        this.tableData = res.data.list;
        this.tableData.forEach((value, key) => {
          if (value.state === "1") {
            this.tableData[key].state = "正常";
            this.state.push("禁用");
          } else {
            this.tableData[key].state = "禁用";
            this.state.push("启用");
          }
        });
      });
  },
  requestData() {
    this.$http
      .post("salehotel/list?token=" + window.commo.token, {
        pageSize: this.pageSize,
        pageNum: this.currentPage,
        timestamp: 0,
        version: "string",
        operation: "string"
      })
      .then(res => {
        this.listData = res.data.list;
        this.tableData = res.data.list;
        this.tableData.forEach((value, key) => {
          if (value.state === "1") {
            this.tableData[key].state = "正常";
            this.state.push("禁用");
          } else {
            this.tableData[key].state = "禁用";
            this.state.push("启用");
          }
        });
      });
  },
  mounted() {
    window.bus.$on("showDepartment", val => {
      this.showDepartment = val;
    });
  },
  methods: {
    handleClick() {},
    addSuppliers() {
      this.$router.push("/index/add_hotel");
    },
    saveDepartment() {
      this.showDepartment = false;
    },
    cancel() {
      this.showDepartment = false;
    },
    stateRow(index, rows) {
      let state = 0;
      let value = [];
      value.push(rows[index].id);
      if (rows[index].status === "启用") state = 0;
      if (rows[index].status === "禁用") state = 1;
      this.$confirm("此操作将禁用该员工, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        const data = Object.assign({}, window.commo.defaultParameter, {
          saleHotelIds: value,
          status: state
        });
        this.$http
          .post("salehotel/enable/toggle?token=" + window.commo.token, data)
          .then(res => {
            this.tableData = res.data.list;
          });
      });
    },
    dropdownStateChange(value) {
      this.currentPage = 1;
      this.copyData = [];
      if (value === "禁用") {
        this.listData.forEach((value, index) => {
          if (this.listData[index].state === "禁用")
            this.copyData.push(this.listData[index]);
        });
        this.tableData = this.copyData;
      } else if (value === "启用") {
        this.listData.forEach((value, index) => {
          if (this.listData[index].state === "正常")
            this.copyData.push(this.listData[index]);
        });
        this.tableData = this.copyData;
      } else {
        this.tableData = this.listData;
      }
      this.dropdownValue = value;
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.$http
        .post("salehotel/list?token=" + window.commo.token, {
          pageSize: this.pageSize,
          pageNum: this.currentPage,
          timestamp: 0,
          version: "string",
          operation: "string"
        })
        .then(res => {
          this.listData = res.data.list;
          this.tableData = res.data.list;
          this.tableData.forEach((value, key) => {
            if (value.state === "1") {
              this.tableData[key].state = "正常";
              this.state.push("禁用");
            } else {
              this.tableData[key].state = "禁用";
              this.state.push("启用");
            }
          });
        });
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.$http
        .post("salehotel/list?token=" + window.commo.token, {
          pageSize: this.pageSize,
          pageNum: this.currentPage,
          timestamp: 0,
          version: "string",
          operation: "string"
        })
        .then(res => {
          this.listData = res.data.list;
          this.tableData = res.data.list;
          this.tableData.forEach((value, key) => {
            if (value.state === "1") {
              this.tableData[key].state = "正常";
              this.state.push("禁用");
            } else {
              this.tableData[key].state = "禁用";
              this.state.push("启用");
            }
          });
        });
    },
    editHotel(index) {
      sessionStorage.setItem("HotelId", this.tableData[index].id);
      this.$http
        .post("salehotel/info?token=" + window.commo.token, {
          timestamp: 0,
          version: "string",
          operation: "string",
          id: this.tableData[index].id
        })
        .then(res => {
          window.commo.hotelInformation = res.data;
          if (res.data.errCode) return;
          this.$router.push("/index/add_hotel");
        });
    }
  },
  components: {
    StaffAccount,
    DepartmentSetting,
    PermissionsSetting,
    Breadcrumb
  }
};
</script>
<style lang="scss">
.supply-content {
  margin-top: 20px;
  background-color: white;
  padding: 20px 30px 20px 30px;
  position: relative;
  .el-form {
    .el-form-item {
      .el-form-item__content {
        line-height: 2;
        .el-table {
          /*调整th与td的宽度占比*/
          .el-table__body,
          .el-table__header {
            width: 100% !important;
          }
        }
        .el-dropdown {
          float: left;
          margin-right: 30px;
        }
        /*搜索*/
        .el-input {
          width: 400px;
          float: left;
          input {
            height: 34px;
            line-height: 34px;
          }
          .el-input-group__append {
            padding: 0 14px;
            .el-button {
              margin: -14px;
            }
            button {
              padding: 8px 9px;
            }
          }
          .el-input-group__append:hover {
            background-color: #6d2377;
            color: #fff;
            border-radius: 0 4px 4px 0;
          }
        }
        .el-pagination {
          text-align: right;
          .el-pagination__jump {
            .el-input {
              float: none !important;
              width: 50px !important;
            }
          }
          .el-input {
            width: 100px;
          }
        }
      }
    }
  }
}
/*下拉菜单*/
.hotel-state-select {
  padding: 10px 0;
  .el-dropdown-menu__item {
    padding: 0 30px;
    font-size: 12px;
    line-height: 34px;
    margin-top: 0px;
  }
}
.expand-trigger div {
  height: 50px !important;
}
.increase {
  position: absolute;
  top: 0;
  left: 0;
  width: 96.5%;
  background: white;
  z-index: 3;
  padding: 20px;
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.1);
  h1 {
    text-align: left;
    margin-bottom: 10px;
  }
  .el-form-item {
    .el-form-item__content {
      text-align: left;
      .el-input {
        width: 300px;
      }
    }
  }
}
.el-table th {
  background-color: #e9ecf3;
  text-align: center;
}
.el-table--enable-row-transition .el-table__body td {
  text-align: center;
  padding: 10px 0;
}
.el-pager li.active {
  background-color: rgb(105, 127, 147);
  color: white;
}
.el-pager li {
  min-width: 28px;
  background-color: rgb(236, 239, 247);
  margin: 0 5px;
  border-radius: 4px;
  color: rgb(134, 151, 167);
}
.el-pager li.btn-quicknext,
.el-pager li.btn-quickprev {
  color: rgb(134, 151, 167);
}
.el-pagination .btn-prev,
.el-pagination .btn-next {
  background-color: rgb(236, 239, 247);
  color: rgb(134, 151, 167);
  min-width: 28px;
}
.el-pagination .btn-prev {
  padding-right: 5px;
}
.el-pagination .btn-next {
  padding-left: 5px;
  margin-right: 20px;
}
.el-pagination__sizes {
  margin-right: 0;
}
.el-table__footer-wrapper,
.el-table__header-wrapper {
  background-color: #e9ecf3;
}

.cascader-input {
  float: left;
  width: 200px;
  margin-right: 30px;
  position: relative;
  top: -5px;
  .el-input {
    width: 200px !important;
    top: 0;
  }
}
</style>
